<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b">
    <el-menu-item index="1">
      <router-link to="/">基础设置</router-link>
    </el-menu-item>
    <el-menu-item index="2">
      <router-link to="/user">用户管理</router-link>
    </el-menu-item>
    <el-menu-item index="3">
      <router-link to="/material">素材管理</router-link>
    </el-menu-item>
    <li class="user">
      <span class="name">{{nickname}}</span>
      <a class="cancel" @click="cancel()" href="javascript:">注销</a>
    </li>
  </el-menu>
</template>
<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        activeIndex: '1',
        nickname: ''
      }
    },
    mounted() {
      this.nickname = this.$store.state.modules.user.nickname
    },
    methods: {
      // 注销
      cancel() {
        this.$store.commit('REMOVE_USER', '')
        this.$router.push({
          path: '/login'
        })
      },
      handleSelect(key, keyPath) {
//        console.log(key, keyPath)
      }
    }
  }
</script>

<style lang="less" scoped>
  .user {
    float: right;
    height: 60px;
    line-height: 60px;
    padding-right: 40px;
    font-size: 16px;
    .name {
      color: #fff;
      margin-right: 5px;
    }
    .cancel {
      color: #fff;
    }
    .name:focus {
      outline: none !important;
    }
  }

  .user:focus {
    outline: none !important;
  }

  .el-menu {
    .router-link-exact-active {
      display: inline-block;
      width: 100%;
      height: 100%;
    }
  }

  .el-menu-item {
    padding: 0;
    a {
      display: inline-block;
      padding: 0 20px;
    }
  }
</style>
